<template>
  <a-form class='wd-form' ref="formRef" :model="formField" :selfUpdate="true" :rules="currentDataForm.rules"
    v-bind="formItemLayout">
    <a-row :gutter="12">
      <template v-for="item in currentDataForm.fieldDataList" :key='item.field'>
        <a-col :span="item.width?item.width:24" v-if="item.isShow!==false">
          <a-form-item :labelCol="item.labelCol" :label='item.label' :name="item.field"  v-bind="item.formItemOptions">
            <slot :name="item.template" v-if="item.type==='template'" :obj="item"></slot>
            <i-form-item v-else :formField="formField" :currentFildData='item' @changeSelectFun="changeSelectFun">
            </i-form-item>
          </a-form-item>
        </a-col>
      </template>
    </a-row>
  </a-form>
</template>

<script lang="ts">
import { ValidateErrorEntity } from 'node_modules/ant-design-vue/lib/form/interface'
import IFormItem from './IFormItem.vue'
import { defineComponent, PropType, ref, computed } from 'vue'
import { FormInterFace, FieldListInterFace } from './IFormInterFace'
// import { Form } from 'ant-design-vue'
export default defineComponent({
  name: 'wd-form',
  props: {
    dataForm: {
      type: Object as PropType<FormInterFace<any>>,
      required: true
    }
  },
  setup (props) {
    const formRef = ref()
    /**
         计算整合表单数据
        */
    const formField = computed(() => {
      return props.dataForm.form
    })
    const currentDataForm = computed(() => {
      const data = {
        labelWidth: props.dataForm.labelWidth,
        form: props.dataForm.form,
        fieldDataList: props.dataForm.fieldDataList,
        rules: {}
      }
      const rules: any = {}
      data.fieldDataList
        .filter((item: FieldListInterFace) => {
          return item.isShow !== false
        })
        .forEach((item: FieldListInterFace) => {
          rules[item.field] = item.rules
        })
      data.rules = rules
      return data
    })
    /**
         计算标签宽度问题
        */
    const formItemLayout = computed(() => {
      return {
        labelCol: { style: { width: props.dataForm.labelWidth + 'px' } }
      }
    })
    // 清空表单验证
    const resetForm = () => {
      formRef.value.resetFields()
    }
    // 清空表单验证
    const resetValidation = () => {
      formRef.value.resetValidation()
    }
    const changeSelectFun = (item: FieldListInterFace, data: any, extra?:any) => {
      if (item.callback) {
        item.callback(data, item, props.dataForm, extra)
      }
    }
    // 获取表单提交内容
    const onSubmit = () => {
      return new Promise((resolve, reject) => {
        formRef.value.validate().then(() => {
          resolve({
            form: formField.value,
            dataForm: currentDataForm.value
          })
        }).catch((error: ValidateErrorEntity<any>) => {
          reject(error)
        })
      })
    }
    return {
      resetValidation,
      currentDataForm,
      formItemLayout,
      formRef,
      formField,
      onSubmit,
      resetForm,
      changeSelectFun
    }
  },
  methods: {},
  components: {
    IFormItem
    // 'a-form': Form,
    // 'a-form-item': Form.Item
  }
})
</script>
//  type: 'input', // form表单类型
//  label: '用户名', // 字段描述信息
//  field: '', // form 对应字段
//  model: '',
//  isShow: '', // 是否展示
//  template: '', // 自定义模版
//  ruleField: '', // 验证对应字段
//  callback: '',
//  dataList: '', // 下拉框/复选框数据集合
//  rules: ''
// 验证类型
/**
  string: Must be of type string. This is the default type.
  number: Must be of type number.
  boolean: Must be of type boolean.
  method: Must be of type function.
  regexp: Must be an instance of RegExp or a string that does not generate an exception when creating a new RegExp.
  integer: Must be of type number and an integer.
  float: Must be of type number and a floating point number.
  array: Must be an array as determined by Array.isArray.
  object: Must be of type object and not Array.isArray.
  enum: Value must exist in the enum.
  date: Value must be valid as determined by Date
  url: Must be of type url.
  hex: Must be of type hex.
  email: Must be of type email.
 */
